<template>
  <div class="lb-table" ref="lbTableBg">
    <!-- <img src="../../../assets/imgs/left/tableBg.png"> -->
    <div class="lb-table-container">
      <div class="lb-table-title" ref="lbTableTitle">
        <div
          :class="'title'+ index"
          v-for="(item,index) in tbTitle"
          :key="index"
          ref="tbTitle"
        >{{item}}</div>
      </div>
      <div
        class="lb-table-content"
        :class="'table-row-'+index"
        v-for="(item,index) in data"
        :key="index"
        ref="tableContent"
      >
        <div class="content-0 hy-35J" ref="tbContent0">{{item.rank}}</div>
        <div class="content-1 hy-35J" ref="tbContent1">
          <div class="text-bg">{{item.demp}}</div>
        </div>
        <div class="content-2-1 hy-35J" ref="tbContent2-1">{{item.link}}</div>
        <div class="content-2" ref="tbContent2">
          <tableNumber :params="item.standardTime" ref="tableCell"></tableNumber>
        </div>
        <div class="content-2" ref="tbContent2">
          <tableNumber :params="item.avgTime" ref="tableCell"></tableNumber>
        </div>
        <div class="content-3" :class="item.tag" v-if="item.tag">
          <tableNumber :params="item.scale" ref="tableCell"></tableNumber>%
          <img src="../../../../assets/imgs/left/up.png" v-if="item.tag == 'up'" />
          <img
            src="../../../../assets/imgs/left/down.png"
            v-if="item.tag == 'down'"
            style="transform:rotate(180deg)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tableNumber from './tableNumber'
export default {
  components: {
    tableNumber
  },
  data() {
    return {}
  },
  props: ['data', 'tbTitle', 'tbStyle'],
  created() {},
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    handleStyle() {
      // let tbTitleList = this.$refs.tbTitle
      // tbTitleList.map((item,index) => {
      // 	item.style.width = this.tbStyle.title2Width
      // })
      // tbTitleList[0].style.width = this.tbStyle.title1Width
      // tbTitleList[0].style.marginRight = "10px"
    },
    init() {
      let tl = new TimelineMax({})
      let tw1 = TweenMax.from(this.$refs.lbTableBg, 0.1, {
        opacity: 0
      })
      let tw2 = TweenMax.from(this.$refs.lbTableTitle, 0.5, {
        transform: 'scaleY(0)',
        opacity: 0,
        ease: Back.easeIn
      })
      tl.add(tw1, 'start').add(tw2, 'start+=0.3')

      let tableContentlist = this.$refs.tableContent
      let len = this.$refs.tableContent.length
      let lines1 = {}
      for (let i = 0; i < len; i++) {
        lines1[`line${i + 1}`] = TweenMax.from(tableContentlist[i], 0.5, {
          transform: 'scaleY(0)',
          opacity: 0,
          ease: Back.easeIn
        })
      }

      for (let i = 0; i < len; i++) {
        tl.add(lines1[`line${i + 1}`], 'start+=' + (i * 0.2 + 0.3))
      }
      let tableCellList = this.$refs.tableCell
      for (let i = 0; i < tableCellList.length; i++) {
        tl.add(tableCellList[i].init(), 'start+=' + (i * 0.1 + 0.2))
      }
      return tl
    }
  }
}
</script>
<style lang='scss' scoped>
.lb-table {
  width: 420px;
  height: 150px;
  .lb-table-container {
    .lb-table-title {
      width: 100%;
      height: 30px;
      background: #030c31;
      display: flex;
      color: #fff;
      font-size: 12px;
      font-family: 'HYQiHeiY2-35J';
      line-height: 30px;
      text-align: center;
      .title0 {
        width: 39%;
        margin-right: 5px;
      }
      .title1 {
        width: 17%;
      }
      .title2,
      .title3 {
        width: 16%;
      }
    }

    .lb-table-content {
      width: 100%;
      // height: 30px;
      // line-height: 30px;
      text-align: center;
      display: flex;
      margin-top: 10px;

      .content-0 {
        width: 11%;
        font-size: 12px;
        color: #61667d;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 3px;
      }
      .content-1 {
        box-sizing: border-box;
        // border: 4px solid #030c31;
        background: #030c31;
        border-right: none;
        width: 28%;
        margin-right: 5px;
        padding: 4px 0 2px 5px;
        .text-bg {
          width: 100%;
          background: linear-gradient(
            to right,
            rgba(0, 247, 250, 0.2) 0,
            rgba(255, 255, 255, 0) 100%
          );
          color: #bfbfbf;
          font-size: 14px;
          font-weight: bold;
          // line-height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .content-2-1 {
        width: 24%;
        background: #041d32;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        // text-shadow: 2px 0 3px rgba(0, 247, 250, 0.4),-2px 0 3px rgba(0, 247, 250, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
      }
      .content-2 {
        width: 13%;
        background: #041d32;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
      }
      .content-3 {
        width: 15%;
        background: #041d32;
        font-family: 'Acens';
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
      }
      .up {
        color: #ea2346;
        .table-item-value {
          color: #ea2346 !important;
          // text-shadow: 2px 0 3px rgba(234, 35, 70, 0.4),-2px 0 3px rgba(234, 35, 70, 0.4);
        }
      }
      .down {
        color: #2af9fa;
        .table-item-value {
          color: #2af9fa !important;
          // text-shadow: 2px 0 3px rgba(42, 249, 250, 0.4),-2px 0 3px rgba(42, 249, 250, 0.4);
        }
      }
    }
  }
}
</style>